<template>
  <el-button
    v-bind="$attrs"
    v-if="uerInfoStore.buttons.includes(permission)"
  ></el-button>
</template>

<script lang="ts">
export default {
  name: "registerPermissionDirective",
};
</script>

<script lang="ts" setup>
import { useUserInfoStore } from "@/stores/userInfo";
const uerInfoStore = useUserInfoStore();
defineProps<{
  permission: string;
}>();
</script>

<style scoped></style>
<!-- 

按钮权限控制
3.自定义全局组件 <PermissionButton  :permission="'btn.Permission.add'"/>
 
  - components/PermissionButton/index.vue文件中，定义组件
    <el-button
      v-bind="$attrs"
      v-if="uerInfoStore.buttons.includes(permission)"
    ></el-button>

    import { useUserInfoStore } from "@/stores/userInfo";
    const uerInfoStore = useUserInfoStore();
    defineProps<{
      permission: string;
    }>();

  - main.js中在挂载前全局注册组件
    app.component("PermissionButton", PermissionButton);
  - 组件中使用， 
    <PermissionButton
      type="primary"
      size="small"
      :icon="Plus"
      title="添加菜单"
      :permission="'btn.Permission.add'"
    />
只需要引入一次pinia,注册一次，全局使用
有局限性，只能按钮元素可以
-->
